<template>
	<div class="page-header-fixed page-sidebar-closed-hide-logo page-sidebar-closed-hide-logo" style="background: #fff;height: 100%">
		<div class="page-header navbar navbar-fixed-top" style="height:4%;overflow: hidden;z-index: 10051;">
			<div class="page-header-inner">
				<div class="page-logo" style="height:50px;overflow: hidden;">
					<a href="" onclick="return false;">
						<img src="static/global/img/index_logo.png" style="width: 120px; margin-top: 0px;" alt="logo" class="logo-default" />
					</a>
				</div>
				<!-- <div class="page-top"></div> -->
			</div>
			<a href="javascript:;" onclick="return false;" style="float: right;margin-right:10px;margin-top:15px;color:#999999;" @click="loginOut()">
				<i class="icon-logout"></i> 退出
			</a>
			<a href="javascript:;" @click="changPass" class="dropdown-toggle" onclick="return false;" style="float: right;margin-right:30px;margin-top:15px;color:#999999;">
				<i class="icon-user"></i> 修改密码
			</a>
		</div>
		<div class="page-container" style="height:94.9%;margin: 0;top:50px;overflow-y:scroll;" id="container">
			<div class="page-sidebar-wrapper">
				<div class="page-sidebar navbar-collapse collapse" style="z-index: 10050;">
					<ul class="page-sidebar-menu navMenu" style="height:1180px;">
						<li class="nav-item navdefault open" @click="wel()" id="11">
							<a class="nav-link nav-toggle active" onclick="return false;" href="javascript:;">
								<i class="icon-home"></i>
								<!--<i class="area-chart"></i>-->
								<span class="title">首页</span>
								<span class="selected"></span>
							</a>
						</li>
						<li style="overflow: hidden;" class="tooltips" v-for="(itemmenu,index) in leftNav" @click="showSubs(index)" :id="index">
							<a href="javascript:;" onclick="return false;" class="nav-link nav-toggle">
								<i :class="itemmenu.imgico"></i>
								<span class="title">{{itemmenu.text}}</span>
								<span class="arrow"></span>
							</a>
							<ul class="sub-menu">
								<li @click="addTabs(submenu.text,submenu.url)" v-for="(submenu,index) in submenuList">
									<a style="width: 100%;" href="javascript:;" onclick="return false;" target="content">{{submenu.text}}</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
			<div class="page-content-wrapper" 　style="background: #3d4957;height: 127%;">
				<div class="page-content" style="padding: 0 !important;padding-left: 10px!important;height: 100%;">
					<rightContent :tabs="tabs" @delTabEvent="deltab" @showbox="toshow" />
				</div>
			</div>
		</div>
    <!--修改密码模态框-->
		<div class="modal fade" id="chgPass" tabindex="-1" role="dialog" data-keyboard="false">
			<div class="modal-dialog" role="document">
				<div class="modal-content" style="width:800px;height: 300px;">
					<div class="modal-header" style="border-radius: 4px;">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
						<ul class="nav nav-tabs" role="tablist">
							<li role="presentation" class="active">
								<a href="#qusInfo" aria-controls="qusInfo" role="tab" data-toggle="tab">修改角色密码</a>
							</li>
						</ul>
					</div>
					<div class="modal-body" style="padding-right: 60px;height:170px;overflow: hidden;overflow-y: auto;">
						<div class="tab-content">
							<div role="tabpanel" class="tab-pane active" id="qusInfo">
								<el-form :model="rolepass" :rules="rules" ref="rolepass" label-width="100px">
									<!--<input type="hidden" v-model="passid">-->
									<el-col :span="24">
										<el-form-item label="旧密码:" prop="oldPassword">
											<el-input v-model="rolepass.oldPassword" size="small" type="text"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="24">
										<el-form-item label="新密码:" prop="newPassword">
											<el-input v-model="rolepass.newPassword" size="small" type="text"></el-input>
										</el-form-item>
									</el-col>
								</el-form>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-success" id="save" @click="passSave('rolepass')">保存</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
			<div></div>
		</div>
	</div>
</template>

<script>
	import axios from "axios"
	import { navToggle } from './list.js'
	import rightContent from "./rightContent.vue"
	import { mapGetters, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				leftNav: this.$store.state.nav[0], //左侧导航
				submenuList: [], //子菜单
				tabs: this.$store.state.tabList, //右侧列表
				rolepass: {},
				rules: {
					oldPassword: [{
						required: true,
						message: "旧密码不能为空",
						trigger: "change"
					}],
					newPassword: [{
						required: true,
						message: "新密码不能为空",
						trigger: "change"
					}]
				},
				width:$(window).width()
			}
		},
		components: {
			rightContent
		},
		computed: {
			...mapGetters([
				'tabList',
			])
		},
		watch: {
			tabList() {
				this.tabs = this.tabList
			},
			width (val) {
	        if (!this.timer) {
	          this.height = val
	          this.timer = true
	          let that = this
	          setTimeout(function () {
	              // that.resizeWidth()
	              that.timer = false
	          }, 400)
	        }
	      }
		},
		activated() {
			this.leftNav = this.$store.state.nav[0];
			this._resizeWidth();
		},
		mounted() {
			this.navToggle();
			this.showSubs(0);
		},
		methods: {
			//显示二级菜单
			showSubs(index) {
				this.submenuList = this.leftNav[index].children;
			},
			//退出登录
			loginOut() {
				this.$router.replace("/")
				$(".backstretch").show();
				window.location.reload();
				sessionStorage.clear();
			},
			//导航下拉展开
			navToggle,
			//增加tabs
			addTabs(name, view) {
				if(this.tabs.length > 9) {
					this.$message.error("tab最多开启10个,请关闭后再操作")
				} else if(this.tabs.length > 7&&this.width<1680){
					this.$message.error("tab最多开启8个,请关闭后再操作")
				}else{
					let _tab = {
						name: name,
						view: view
					}
					this.setTabList(_tab)
					this.$router.replace(view)
				}
			},
			deltab(index, length) {
				// 当index不为1并且是从最后一位开始
				if(index === this.tabs.length - 1 && index !== 1) {
					this.$router.push(this.tabs[index - 1].view)
				}
				// 当index不从最后一位开始并且不为0
				else if(index !== this.tabs.length - 1 && index !== 0) {
					this.$router.push(this.tabs[this.tabs.length - 1].view)
				}
				// 否则指定首页
				else {
					this.$router.push('/interface/homemain')
				}
				// 最后在tabs中删除当前需要删除的坐标index
				// this.tabs.splice(index, 1)
				// this.tabList.splice(index, 1)
				this.deleteTabList({
					index,
					length: length
				})
			},
			//主页
			wel() {
				let _tab = {
					name: "首页",
					view: "/interface/homemain"
				}
				this.setTabList(_tab)
				this.$router.push("/interface/homemain")
			},
			...mapMutations({
				setTabList: 'SET_TABLIST',
				deleteTabList: 'DELETE_TABLIST',
			}),
			changPass() {
				$("#chgPass").modal("show");
				this.rolepass = {};
			},
			passSave(formname) {
				this.$refs[formname].validate((valid) => {
					if(valid) {
						axios.post("/interface/admin/saveSelfPassword?oldPassword="+this.rolepass.oldPassword+"&newPassword="+this.rolepass.newPassword).then((res) => {
							if(res.data.code == 1) {
								$("#chgPass").modal("hide");
								this.$message.success("修改成功")
							} else {
								var msg = res.data.msg;
								$("#chgPass").modal("hide");
								this.$alert(msg, '提示消息', {
									confirmButtonText: '确定',
									callback: action => {
										$("#chgPass").modal("show");
									}
								});
							}
						});
					} else {
						return false;
					}
				})
			},
			toshow(msg) {

				var list = this.leftNav;
				for(var i = 0; i < list.length; i++) {
					for(var j = 0; j < list[i].children.length; j++) {
						if(msg == list[i].children[j].text) {
							/*$("#"+i).addClass("open");
							$("#"+i+" .nav-link").addClass("active");*/
							$(".start").removeClass("active")
							var parent = $("#" + i + " a").parent().parent(); //获取当前页签的父级的父级
							var labeul = $("#" + i + " a").parent("li").find(">ul")
							if($(this).parent().hasClass('open') == false) {
								//展开未展开
								parent.find('ul').hide();
								parent.find("li").removeClass("open")
								parent.find('li a').removeClass("active").find(".arrow").removeClass("open")
								$("#" + i + " a").parent("li").addClass("open").find(labeul).show();
								$("#" + i + " a").addClass("active").find(".arrow").addClass("open")
								$("#" + i + " ul li").removeClass("open");
								$("#" + i + " ul li a").removeClass("active");
							} else {
								$("#" + i + " a").parent("li").removeClass("open").find(labeul).hide();
								if($("#" + i + " a").parent().find("ul").length > 0) {
									$("#" + i + " a").removeClass("active").find(".arrow").removeClass("open")
								} else {

									$("#" + i + " a").addClass("active")
								}
							}
							this.submenuList = list[i].children;
						}
					}
				}
				if(msg == "首页") {
					$(".start").removeClass("active")
					var parent = $("#11 a").parent().parent(); //获取当前页签的父级的父级
					var labeul = $("#11 a").parent("li").find(">ul")
					if($(this).parent().hasClass('open') == false) {
						//展开未展开
						parent.find('ul').hide();
						parent.find("li").removeClass("open")
						parent.find('li a').removeClass("active").find(".arrow").removeClass("open")
						$("#11 a").parent("li").addClass("open").find(labeul).show();
						$("#11 a").addClass("active").find(".arrow").addClass("open")
						$("#11 ul li").removeClass("open");
						$("#11 ul li a").removeClass("active");
					} else {
						$("#11 a").parent("li").removeClass("open").find(labeul).hide();
						if($("#11 a").parent().find("ul").length > 0) {
							$("#11 a").removeClass("active").find(".arrow").removeClass("open")
						} else {

							$("#11 a").addClass("active")
						}
					}
				}
			},
			 _resizeWidth() {
        window.onresize = () => {
          return (() => {
            // window.screenWidth = document.body.clientWidth
            this.width = $(window).width()
          })()
        }
      },
		}
	}
</script>

<style scoped>
	li.open a.active {
		background: #36c6d3 !important;
		color: #fff !important;
	}
</style>
